<template>
  <div class="details">
    <el-row :gutter="20" class="details-container">
      <!-- 左侧菜单栏 -->
      <el-col :span="3" class="navigation-bar">
        <div class="device-datails">
          <!-- 左边图片 -->
          <div class="pic"><img src="./img/device-details.png" alt="" /></div>
          <!-- 右边文字 -->
          <div class="wenzi">
            <p class="china">{{ deviceTitle.name }}</p>
            <p class="Eng">{{ deviceTitle.Eng }}</p>
          </div>
        </div>
        <!-- 左侧菜单栏-->
        <p v-for="showSelect in showSelectList" :key="showSelect.num" :class="showinfo == showSelect.num ? 'Activemenu' : 'menu'" @click="handlerView(showSelect.num)">
          <img v-if="showinfo == showSelect.num" :src="showSelect.lightIcon" alt="" />
          <img v-if="showinfo !== showSelect.num" :src="showSelect.grayIcon" alt="" />
          {{ showSelect.name }}
        </p>
      </el-col>
      <!-- 右侧信息栏 -->
      <el-col :span="21" class="information-bar">
        <div class="information-content">
          <!-- 最顶部卡片 -->
          <div class="information">
            <div class="card-info">
              <!--有背景的 -->
              <div class="info-top">
                <!-- 左边图片 -->
                <div class="info-top-img">
                  <img v-if="details.DeviceImages" :src="`${baseURL}/${details.DeviceImages}`" />
                </div>
                <!-- 右边文字 -->
                <div class="info-top-title">
                  <p class="title">{{ details.ProductName }}<span style="font-size:20px">({{ details.TerminalName }})</span><span style="font-size:18px;margin-left:15px">({{ details.DeviceSerialNo }}-{{
                    $route.params.id }})</span></p>
                  <p class="little-title"> {{ details.DeviceLocation }}</p>
                </div>
              </div>
              <!-- 无背景的 -->
              <div class="info-bottom">

                <!-- 点击数据统计显示的内容 -->
                <div v-if="showinfo == 1" class="showInfoOne">

                  <el-select v-model="templatevalue" :placeholder="lastProdeventinfoselfValue.TemplateName" class="select">
                    <el-option v-for="item in templateinfo" :key="item.TemplateId" :label="item.TemplateName" :value="item.TemplateId">
                      <span style="float: left"  >{{ item.TemplateName }}</span>
                    </el-option>
                  </el-select>
                </div>

                <!-- 点击统计检索显示的内容 -->
                <div v-if="showinfo == 2" class="showinfo">
                  <div class="left">

                    <el-select v-model="templatevalue1" :placeholder="lastProdeventinfoselfValue1.TemplateName" class="selectSmall" style="width:300px">
                      <el-option v-for="item in templateinfo" :key="item.TemplateId" :label="item.TemplateName" :value="item.TemplateId">
                        <span style="float: left">{{ item.TemplateName }}</span>
                        <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> -->
                      </el-option>
                    </el-select>
                    <div class="picker">
                      <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" :disabledDate="disabledDateFun" format="YYYY-MM-DD HH:mm:ss" class="datePicker"
                        @change="handleDateChange"></el-date-picker>
                      <!-- 双左 -->
                      <el-button @click="decreaseDate" class="jiantou" @mouseover="handleMouseOver(1)" @mouseout="handleMouseOut(1)" @mousedown="handleMouseDown(1)" @mouseup="handleMouseUp(1)">
                        <leftIconComponent :svgColor1="svgColor1" :svgBorder1="svgBorder1"></leftIconComponent>
                      </el-button>
                      <!-- 单左 -->
                      <el-button @click="leftDate" class="jiantou" @mouseover="handleMouseOver(2)" @mouseout="handleMouseOut(2)" @mousedown="handleMouseDown(2)" @mouseup="handleMouseUp(2)">
                        <leftTwoIconComponent :svgColor2="svgColor2" :svgBorder2="svgBorder2"></leftTwoIconComponent>
                      </el-button>
                      <!-- 单右 -->
                      <el-button @click="rightDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(3)"
                        @mouseout="handleMouseOut(3)" @mousedown="handleMouseDown(3)" @mouseup="handleMouseUp(3)">
                        <rightIconComponent :svgColor3="svgColor3" :svgBorder3="svgBorder3"></rightIconComponent>
                      </el-button>
                      <!-- 双右 -->
                      <el-button @click="increaseDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(4)"
                        @mouseout="handleMouseOut(4)" @mousedown="handleMouseDown(4)" @mouseup="handleMouseUp(4)">
                        <rightTwoIconComponent :svgColor4="svgColor4" :svgBorder4="svgBorder4"></rightTwoIconComponent>
                      </el-button>
                      <span v-for="(list, index) in  dataList " :key="list.num" @click="changeDate(list.num)" class="time" :class="{ highlighted: list.highlighted, activated: list.activated }"
                        @mouseover="handleTextMouseOver(index)" @mouseout="handleTextMouseOut(index)" @mousedown="handleTextMouseDown(index)" @mouseup="handleTextMouseUp(index)">{{ list.name }}</span>

                      <el-select v-model="timeSelect" placeholder="请选择时间阈值" class="selectminute">
                        <el-option v-for="timeItem in selectTime" :key="timeItem.valueNum" :label="timeItem.time" :value="timeItem.valueNum">
                        </el-option>
                        <!-- <el-option label="10分钟" :value="10">10分钟</el-option>
                        <el-option label="30分钟" :value="30">30分钟</el-option>
                        <el-option label="60分钟" :value="60">60分钟</el-option>
                        <el-option label="8小时" :value="480">8小时</el-option>
                        <el-option label="12小时" :value="720">12小时</el-option>
                        <el-option label="24小时" :value="1440">24小时</el-option> -->
                      </el-select>
                    </div>
                  </div>
                  <div class="yellowbtn">
                    <!-- 搜索 -->
                    <el-button class="btn">
                      <svg t="1689239872514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5324" width="14" height="14">
                        <path
                          d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                          fill="#ffffff" p-id="5325"></path>
                      </svg>
                      <span>搜索</span>
                    </el-button>
                    <!-- 导出 -->
                    <el-button class="btn" @click="exportHandler">
                      <svg t="1689240409114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13172" width="14" height="14">
                        <path
                          d="M862 393.57H712c-71.68 0-130-58.32-130-130V112c0-12.15 7.32-23.11 18.55-27.73a29.938 29.938 0 0 1 32.71 6.59l250 251.56c8.55 8.59 11.07 21.47 6.43 32.67s-15.58 18.48-27.69 18.48zM642 184.75v78.82c0 38.59 31.41 70 70 70h77.89L642 184.75zM862 748.86c-7.68 0-15.35-2.93-21.21-8.79L727.64 626.95c-11.72-11.72-11.72-30.7 0-42.42s30.7-11.72 42.42 0L883.2 697.65c11.72 11.72 11.72 30.7 0 42.42-5.85 5.86-13.52 8.79-21.2 8.79z"
                          p-id="13173" fill="#ffffff"></path>
                        <path
                          d="M748.86 862c-7.68 0-15.35-2.93-21.21-8.79-11.72-11.72-11.72-30.7 0-42.42l113.14-113.14c11.72-11.72 30.7-11.72 42.42 0s11.72 30.7 0 42.42L770.07 853.21a29.91 29.91 0 0 1-21.21 8.79z"
                          p-id="13174" fill="#ffffff"></path>
                        <path d="M862 748.86H529.45c-16.57 0-30-13.44-30-30s13.43-30 30-30H862c16.56 0 30 13.44 30 30s-13.44 30-30 30z" p-id="13175" fill="#ffffff"></path>
                        <path
                          d="M613.48 942H262c-71.68 0-130-58.32-130-130V212c0-71.68 58.32-130 130-130h350c16.56 0 30 13.43 30 30v151.56c0 38.59 31.41 70 70 70h150c16.56 0 30 13.43 30 30v147.57c0 16.57-13.44 29.99-30 29.99s-30-13.42-30-29.99V393.57H712c-71.68 0-130-58.32-130-130V142H262c-38.59 0-70 31.41-70 70v600c0 38.59 31.41 70 70 70h351.48c16.56 0 30 13.44 30 30s-13.43 30-30 30z"
                          p-id="13176" fill="#ffffff"></path>
                      </svg>
                      <span>导出</span>
                    </el-button>
                  </div>
                </div>

                <!-- 点击检测记录显示的内容 -->
                <div v-if="showinfo == 3" class="showinfo">
                  <div class="left">
                    <!-- 模板下拉框 -->
                    <el-select v-model="templatevalue2" :placeholder="lastProdeventinfoselfValue2.TemplateName" class="selectSmall" style="width:300px">
                      <el-option v-for="item in templateinfo" :key="item.TemplateId" :label="item.TemplateName" :value="item.TemplateId">
                        <span style="float: left">{{ item.TemplateName }}</span>
                      </el-option>
                    </el-select>

                    <div class="picker">
                      <!-- 批次搜索 -->
                      <el-select v-model="currentvalue" placeholder="请选择批次" class="selectSmall" style="width:300px" :disabled="currentdisable" clearable @clear="clearBatch">
                        <el-option v-for="item in detailsStore.$state.currentList" :key="item.CreatedDate" :label="item.BatchId" :value="item.BatchId">
                          <span style="float: left">{{ item.BatchId }}</span>
                        </el-option>
                      </el-select>
                      <!-- 日历 -->
                      <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" format="YYYY-MM-DD HH:mm:ss" class="datePicker"></el-date-picker>
                      <!-- 双左 -->
                      <el-button @click="decreaseDate" class="jiantou" @mouseover="handleMouseOver(1)" @mouseout="handleMouseOut(1)" @mousedown="handleMouseDown(1)" @mouseup="handleMouseUp(1)">
                        <leftIconComponent :svgColor1="svgColor1" :svgBorder1="svgBorder1"></leftIconComponent>
                      </el-button>
                      <!-- 单左 -->
                      <el-button @click="leftDate" class="jiantou" @mouseover="handleMouseOver(2)" @mouseout="handleMouseOut(2)" @mousedown="handleMouseDown(2)" @mouseup="handleMouseUp(2)">
                        <leftTwoIconComponent :svgColor2="svgColor2" :svgBorder2="svgBorder2"></leftTwoIconComponent>
                      </el-button>
                      <!-- 单右 -->
                      <el-button @click="rightDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(3)"
                        @mouseout="handleMouseOut(3)" @mousedown="handleMouseDown(3)" @mouseup="handleMouseUp(3)">
                        <rightIconComponent :svgColor3="svgColor3" :svgBorder3="svgBorder3"></rightIconComponent>
                      </el-button>
                      <!-- 双右 -->
                      <el-button @click="increaseDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(4)"
                        @mouseout="handleMouseOut(4)" @mousedown="handleMouseDown(4)" @mouseup="handleMouseUp(4)">
                        <rightTwoIconComponent :svgColor4="svgColor4" :svgBorder4="svgBorder4"></rightTwoIconComponent>
                      </el-button>
                      <span v-for="(list, index) in  dataList " :key="list.num" @click="changeDate(list.num)" class="time" :class="{ highlighted: list.highlighted, activated: list.activated }"
                        @mouseover="handleTextMouseOver(index)" @mouseout="handleTextMouseOut(index)" @mousedown="handleTextMouseDown(index)" @mouseup="handleTextMouseUp(index)">{{ list.name }}</span>
                    </div>
                  </div>
                  <div class="yellowbtn">
                    <el-button class="btn">
                      <svg t="1689239872514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5324" width="14" height="14">
                        <path
                          d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                          fill="#ffffff" p-id="5325"></path>
                      </svg>
                      <span>搜索</span>
                    </el-button>

                  </div>
                </div>

                <!-- 点击日志信息显示的内容 -->
                <div v-if="showinfo == 4" class="showinfo pd3 select">
                  <!-- 级别下拉框 -->
                  <div class="left">
                    <el-select v-model="levelSelect" placeholder="选择级别" style="width:500px" clearable @clear="clearLeaval">
                      <el-option v-for="Select in SelectList" :key="Select.num" :label="Select.name" :value="Select.num">{{ Select.name }}</el-option>

                    </el-select>
                    <div class="picker">
                      <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" format="YYYY-MM-DD HH:mm:ss" class="datePicker"></el-date-picker>
                      <!-- 双左 -->
                      <el-button @click="decreaseDate" class="jiantou" @mouseover="handleMouseOver(1)" @mouseout="handleMouseOut(1)" @mousedown="handleMouseDown(1)" @mouseup="handleMouseUp(1)">
                        <leftIconComponent :svgColor1="svgColor1" :svgBorder1="svgBorder1"></leftIconComponent>
                      </el-button>
                      <!-- 单左 -->
                      <el-button @click="leftDate" class="jiantou" @mouseover="handleMouseOver(2)" @mouseout="handleMouseOut(2)" @mousedown="handleMouseDown(2)" @mouseup="handleMouseUp(2)">
                        <leftTwoIconComponent :svgColor2="svgColor2" :svgBorder2="svgBorder2"></leftTwoIconComponent>
                      </el-button>
                      <!-- 单右 -->
                      <el-button @click="rightDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(3)"
                        @mouseout="handleMouseOut(3)" @mousedown="handleMouseDown(3)" @mouseup="handleMouseUp(3)">
                        <rightIconComponent :svgColor3="svgColor3" :svgBorder3="svgBorder3"></rightIconComponent>
                      </el-button>
                      <!-- 双右 -->
                      <el-button @click="increaseDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(4)"
                        @mouseout="handleMouseOut(4)" @mousedown="handleMouseDown(4)" @mouseup="handleMouseUp(4)">
                        <rightTwoIconComponent :svgColor4="svgColor4" :svgBorder4="svgBorder4"></rightTwoIconComponent>
                      </el-button>
                      <span v-for="(list, index) in  dataList " :key="list.num" @click="changeDate(list.num)" class="time" :class="{ highlighted: list.highlighted, activated: list.activated }"
                        @mouseover="handleTextMouseOver(index)" @mouseout="handleTextMouseOut(index)" @mousedown="handleTextMouseDown(index)" @mouseup="handleTextMouseUp(index)">{{ list.name }}</span>
                    </div>
                  </div>
                  <div class="yellowbtn">
                    <el-button class="btn">
                      <svg t="1689239872514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5324" width="14" height="14">
                        <path
                          d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                          fill="#ffffff" p-id="5325"></path>
                      </svg>
                      <span>搜索</span>
                    </el-button>

                  </div>
                </div>

                <!-- 点击硬件状态显示的内容 -->
                <div v-if="showinfo == 5" class="showinfo pd5">
                  <div class="picker">
                    <el-date-picker v-model="dateRange" type="datetimerange" :default-value="defaultvalue" :picker-options="pickerOptions" format="YYYY-MM-DD HH:mm:ss" class="datePicker"
                      @change="handleDateChange" style="width:400px;">
                    </el-date-picker>
                    <!-- 双左 -->
                    <el-button @click="decreaseDate" class="jiantou" @mouseover="handleMouseOver(1)" @mouseout="handleMouseOut(1)" @mousedown="handleMouseDown(1)" @mouseup="handleMouseUp(1)">
                      <leftIconComponent :svgColor1="svgColor1" :svgBorder1="svgBorder1"></leftIconComponent>
                    </el-button>
                    <!-- 单左 -->
                    <el-button @click="leftDate" class="jiantou" @mouseover="handleMouseOver(2)" @mouseout="handleMouseOut(2)" @mousedown="handleMouseDown(2)" @mouseup="handleMouseUp(2)">
                      <leftTwoIconComponent :svgColor2="svgColor2" :svgBorder2="svgBorder2"></leftTwoIconComponent>
                    </el-button>
                    <!-- 单右 -->
                    <el-button @click="rightDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(3)"
                      @mouseout="handleMouseOut(3)" @mousedown="handleMouseDown(3)" @mouseup="handleMouseUp(3)">
                      <rightIconComponent :svgColor3="svgColor3" :svgBorder3="svgBorder3"></rightIconComponent>
                    </el-button>
                    <!-- 双右 -->
                    <el-button @click="increaseDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')" @mouseover="handleMouseOver(4)"
                      @mouseout="handleMouseOut(4)" @mousedown="handleMouseDown(4)" @mouseup="handleMouseUp(4)">
                      <rightTwoIconComponent :svgColor4="svgColor4" :svgBorder4="svgBorder4"></rightTwoIconComponent>
                    </el-button>
                    <span v-for="(list, index) in  dataList " :key="list.num" @click="changeDate(list.num)" class="time" :class="{ highlighted: list.highlighted, activated: list.activated }"
                      @mouseover="handleTextMouseOver(index)" @mouseout="handleTextMouseOut(index)" @mousedown="handleTextMouseDown(index)" @mouseup="handleTextMouseUp(index)">{{ list.name }}</span>
                    <el-select v-model="timeSelect1" placeholder="请选择时间阈值" class="selectminute">

                      <el-option label="1分钟" :value="1">1分钟</el-option>
                      <el-option v-for=" Select  in  selectTime " :key="Select.time" :label="Select.time" :value="Select.valueNum">{{ Select.time }}</el-option>
                    </el-select>

                  </div>
                  <div class="yellowbtn">
                    <el-button class="btn">
                      <svg t="1689239872514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5324" width="14" height="14">
                        <path
                          d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                          fill="#ffffff" p-id="5325"></path>
                      </svg>
                      <span>搜索</span>
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右面展示区域 -->
          <div class="echartstu-chart">
            <!-- 点击数据统计显示的内容 -->
            <div v-show="showinfo == 1" class="data-statistics">
              <div class="numCard">
                <!-- 检测总数-->
                <el-card class="mr24">
                  <div class="echart-flex">
                    <div>
                      <p class="num">{{ statisticDataSourceinfo?.TotalCount ? statisticDataSourceinfo?.TotalCount : 0 }}</p>
                      <p class="numName">检测总数</p>
                    </div>
                    <Pressure :ProductionEfficiency="statisticDataSourceinfo.ProductionEfficiency ? statisticDataSourceinfo.ProductionEfficiency : 0"
                      :maxProductionEfficiency="detailsStore.$state.maxProductionEfficiency ? detailsStore.$state.maxProductionEfficiency : 0"></Pressure>
                  </div>
                </el-card>
                <!-- 合格品数 -->
                <el-card class="mr24">
                  <div class="echart-flex">
                    <div>
                      <p class="num blue">{{ statisticDataSourceinfo?.QualifiedCount ? statisticDataSourceinfo.QualifiedCount : 0 }}</p>
                      <p class="numName">合格品数</p>

                    </div>
                    <BlueProgress :QualifiedRate="QualifiedRate ? QualifiedRate : 0"></BlueProgress>
                  </div>
                </el-card>
                <!-- 不良品数 -->
                <el-card class="mr24">
                  <div class="echart-flex">
                    <div>
                      <p class="num red">{{ statisticDataSourceinfo?.DefectiveCount ? statisticDataSourceinfo?.DefectiveCount : 0 }}</p>
                      <p class="numName">不良品数</p>
                    </div>
                    <div>
                    </div>
                    <RedProgress :DefectiveRate="DefectiveRate ? DefectiveRate : 0"></RedProgress>
                  </div>

                </el-card>
                <!-- 异常品数 -->
                <el-card class="mr">
                  <div class="echart-flex">
                    <div>
                      <p class="num yellow">{{ statisticDataSourceinfo.AbnormalCount ? statisticDataSourceinfo.AbnormalCount : 0 }}</p>
                      <p class="numName">异常品数</p>
                    </div>
                    <YellowProgress :AbnormalRate="AbnormalRate"></YellowProgress><!-- <span class="ProductRate">异常品率</span> -->
                  </div>

                </el-card>
              </div>
              <div class="bar">
                <BarGraph class="barGraph" :statisticChartSource="detailsStore.$state.statisticChartSource"></BarGraph>
                <BarChart class="barChart" :statisticDataSourceinfo="statisticDataSourceinfo" :DefectiveCount="statisticDataSourceinfo ? statisticDataSourceinfo.DefectiveCount : 0"
                  :TotalCount="statisticDataSourceinfo ? statisticDataSourceinfo.TotalCount : 0">
                </BarChart>
              </div>
            </div>
            <!-- 点击统计检索显示的内容 -->
            <div v-show="showinfo == 2" class="boxShdow">
              <TableSearch :searchCheckNameList="detailsStore.$state.SearchCheckNameList" :searchDataSource="SearchDataSource">
              </TableSearch>
              <Pagination :total="Number(SearchTotalRecords) > 0 ? SearchTotalRecords : 0" :pageSize="pageSize2" @pageChange="handlerpageChange2" @sizeChange="handlersizeChange2"></Pagination>
            </div>
            <!-- 点击检测记录显示的内容 -->
            <div v-show="showinfo == 3" class="boxShdow">
              <DetectionRecord :terminalIdentity='terminalIdentity' :recordsDataSource="recordsDataSource" :CheckNameList="CheckNameList" :pageSize3="pageSize3" :pageNo3="pageNo3"
                :total="Number(TotalRecords) > 0 ? TotalRecords : 0" @dataToParent="handleDataFromChild" @dataToParent1="handleDataFromChild1" @ChildChangePageSize="ChildChangePageSizeValue">
              </DetectionRecord>
              <Pagination :total="Number(TotalRecords) > 0 ? TotalRecords : 0" :pageNo="pageNo3" :pageSize="pageSize3" @pageChange="handlerpageChange3" @sizeChange="handlersizeChange3"></Pagination>
            </div>
            <!-- 点击日志信息显示的内容 -->
            <div v-show="showinfo == 4" class="boxShdow">
              <LogInformation :logDataSource="DataSource"></LogInformation>
              <Pagination :total="Number(loginfoTotalRecords) > 0 ? loginfoTotalRecords : 0" :pageNo="pageNo4" :pageSize="pageSize4" @pageChange="handlerpageChange4" @sizeChange="handlersizeChange4">
              </Pagination>
            </div>
            <!-- 点击硬件状态显示的内容 -->
            <div v-show="showinfo == 5">
              <div class="graph">
                <div class="graph-container">
                  <el-card>
                    <el-row :gutter="5" class="container">
                      <el-col :span="4">
                        <!-- 综合 -->
                        <div @click="handler(1)" :class="showSelect == 1 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="showSelect !== 1" src="./img/ALL1.svg" alt="" class="imgPadding">
                          <img v-if="showSelect == 1" src="./img/ALL2.svg" alt="" class="imgPadding">
                          <span class="zonghe">综合</span>
                        </div>
                        <!-- CPU -->
                        <div @click="handler(2)" :class="showSelect == 2 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] == 0 || !hardwareEcharts?.CPUsUsage?.length" src="./img/CPU1.svg" alt="灰-离线" class="imgWidth">
                          <img v-if="hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] > 0 && hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] <= 74"
                            src="./img/CPU3.svg" alt="绿-正常" class="imgWidth">
                          <img v-if="hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] >= 75 && hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] <= 94"
                            src="./img/CPU2.svg" alt="黄-高" class="imgWidth">
                          <img v-if="hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] > 94 && hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] <= 100"
                            src="./img/CPU4.svg" alt="红-满" class="imgWidth">

                          <div class="usageRate">
                            <p class="word12">CPU使用率</p>
                            <p class="word18">{{ hardwareEcharts.CPUsUsage?.length ? hardwareEcharts?.CPUsUsage?.[(hardwareEcharts?.CPUsUsage)?.length - 1] : 0 }}%</p>
                          </div>
                        </div>
                        <!-- GPU -->
                        <div @click="handler(3)" :class="showSelect == 3 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] == 0 || !hardwareEcharts?.GPUsUsage?.length" src="./img/GPU1.svg" alt="灰-离线" class="imgWidth">
                          <img v-if="hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] > 0 && hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] <= 74"
                            src="./img/GPU3.svg" alt="绿-正常" class="imgWidth">
                          <img v-if="hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] >= 75 && hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] <= 94"
                            src="./img/GPU2.svg" alt="黄-高" class="imgWidth">
                          <img v-if="hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] > 94 && hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] <= 100"
                            src="./img/GPU4.svg" alt="红-满" class="imgWidth">
                          <div class="usageRate">
                            <p class="word12">GPU使用率</p>
                            <p class="word18">{{ hardwareEcharts.GPUsUsage?.length ? hardwareEcharts?.GPUsUsage?.[(hardwareEcharts?.GPUsUsage)?.length - 1] : 0 }}%</p>
                          </div>
                        </div>
                        <!-- RAM -->
                        <div @click="handler(4)" :class="showSelect == 4 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] == 0 || !hardwareEcharts?.MemoryUsage?.length" src="./img/RAM1.svg" alt="灰-离线"
                            class="imgWidth">
                          <img v-if="hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] > 0 && hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] <= 74"
                            src="./img/RAM3.svg" alt="绿-正常" class="imgWidth">
                          <img v-if="hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] >= 75 && hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] <= 94"
                            src="./img/RAM2.svg" alt="黄-高" class="imgWidth">
                          <img v-if="hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] > 94 && hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] <= 100"
                            src="./img/RAM4.svg" alt="红-满" class="imgWidth">
                          <div class="usageRate">
                            <p class="word12">内存使用率</p>
                            <p class="word18">{{ hardwareEcharts.MemoryUsage?.length ? hardwareEcharts?.MemoryUsage?.[(hardwareEcharts?.MemoryUsage)?.length - 1] : 0 }}%</p>
                          </div>
                        </div>
                        <!-- HHD -->
                        <div @click="handler(5)" :class="showSelect == 5 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] == 0 || !hardwareEcharts?.DiskUsage?.length" src="./img/HHD1.svg" alt="灰-离线" class="imgWidth">
                          <img v-if="hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] > 0 && hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] <= 74"
                            src="./img/HHD3.svg" alt="绿-正常" class="imgWidth">
                          <img v-if="hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] >= 75 && hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] <= 94"
                            src="./img/HHD2.svg" alt="黄-高" class="imgWidth">
                          <img v-if="hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] > 94 && hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] <= 100"
                            src="./img/HHD4.svg" alt="红-满" class="imgWidth">
                          <div class="usageRate">
                            <p class="word12">硬盘使用率</p>
                            <p class="word18">{{ hardwareEcharts.DiskUsage?.length ? hardwareEcharts?.DiskUsage?.[(hardwareEcharts?.DiskUsage)?.length - 1] : 0 }}%</p>
                          </div>
                        </div>
                        <!-- NET -->
                        <div @click="handler(6)" :class="showSelect == 6 ? 'left-container' : ' left-container-noSelect '">
                          <img v-if="hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] == 0 || !hardwareEcharts?.NetworkUsage?.length" src="./img/NET1.svg" alt="灰-离线"
                            class="imgWidth">
                          <img
                            v-if="hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] > 0 && hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] <= 74"
                            src="./img/NET3.svg" alt="绿-正常" class="imgWidth">
                          <img
                            v-if="hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] >= 75 && hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] <= 94"
                            src="./img/NET2.svg" alt="黄-高" class="imgWidth">
                          <img
                            v-if="hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] > 94 && hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] <= 100"
                            src="./img/NET4.svg" alt="红-满" class="imgWidth">
                          <div class="usageRate">
                            <p class="word12">网络使用率</p>
                            <p class="word18">{{ hardwareEcharts.NetworkUsage?.length ? hardwareEcharts?.NetworkUsage?.[(hardwareEcharts?.NetworkUsage)?.length - 1] : 0 }}%</p>
                          </div>
                        </div>

                      </el-col>
                      <el-col :span="20">
                        <div class="right-container">
                          <p v-if="showSelect == 1" class="no-data">
                            <Comprehensive :hardwareEcharts="hardwareEcharts"></Comprehensive>
                          </p>
                          <p v-if="showSelect == 2" class="no-data">
                            <CpuEcharts :hardwareEcharts="hardwareEcharts"></CpuEcharts>
                          </p>
                          <p v-if="showSelect == 3" class="no-data">
                            <GpuEcharts :hardwareEcharts="hardwareEcharts"></GpuEcharts>
                          </p>
                          <p v-if="showSelect == 4" class="no-data">
                            <MemoryEcharts :hardwareEcharts="hardwareEcharts"></MemoryEcharts>
                          </p>
                          <p v-if="showSelect == 5" class="no-data">
                            <DiskEcharts :hardwareEcharts="hardwareEcharts"></DiskEcharts>
                          </p>
                          <p v-if="showSelect == 6" class="no-data">
                            <NetworkEcharts :hardwareEcharts="hardwareEcharts"></NetworkEcharts>
                          </p>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Pressure from "./DataStatistics/pressure.vue"
import BlueProgress from "./DataStatistics/blueProgress.vue"
import RedProgress from "./DataStatistics/redProgress.vue"
import YellowProgress from "./DataStatistics/yellowProgress.vue"
import BarGraph from "./DataStatistics/barGraph.vue"
import BarChart from "./DataStatistics/barChart.vue"
import TableSearch from "./StatisticalSearch/tableSearch.vue"
import DetectionRecord from "./DetectionRecord/detectionRecord.vue"
import LogInformation from "./LogInformation/logInformation.vue"
import Comprehensive from "./Comprehensive/comprehensive.vue"
import CpuEcharts from "./Comprehensive/cpuEcharts.vue"
import GpuEcharts from "./Comprehensive/gpuEcharts.vue"
import MemoryEcharts from "./Comprehensive/memoryEcharts.vue"
import DiskEcharts from "./Comprehensive/diskEcharts.vue"
import NetworkEcharts from "./Comprehensive/networkEcharts.vue"
import SystemDialog from "../Dialog/systemdialog.vue"
import Pagination from "./Pagination/pagination.vue"
import Head from "@/components/Head/head.vue";

// 引入箭头组件
import leftIconComponent from "@/views/Details/icon/left.vue"
import leftTwoIconComponent from "@/views/Details/icon/left2.vue"
import rightIconComponent from "@/views/Details/icon/right.vue"
import rightTwoIconComponent from "@/views/Details/icon/right2.vue"

// 引入详情里面左侧菜单的图片
import statisticsLight from "../Details/img/icon-statistics-light.svg"
import statisticsGray from "../Details/img/icon-statistics-gray.svg"

import tableLight from "../Details/img/icon-statistics-table-light.svg"
import tableGray from "../Details/img/icon-statistics-table-gray.svg"

import recordLight from "../Details/img/icon-record-light.svg"
import recordGray from "../Details/img/icon-record-gray.svg"

import logLight from "../Details/img/icon-log-light.svg"
import logGray from "../Details/img/icon-log-gray.svg"

import hardwareLight from "../Details/img/icon-hardware-light.svg"
import hardwareGray from "../Details/img/icon-hardware-gray.svg"
import dayjs from "dayjs";
import request from "@/utils/export-request";
// 引入组件库
import { ElMessage } from "element-plus";
//用户登录相关的小仓库
import { useDevicesStore } from "@/stores/devices";
import { useDetailsStore } from "@/stores/details";
// serverConfig.json是一个JSON格式的配置文件，用于存储服务器的配置信息
import serverConfig from "../../../serverConfig.json";
// 定义基础路径
const baseURL = `http://${serverConfig.server.ip}:${serverConfig.server.port}${serverConfig.server.apiPath}`;
// 获取设备小仓库
const devicesStore = useDevicesStore();
const detailsStore = useDetailsStore();
//获取路由对象
const route = useRoute();
//获取路由器对象
const router = useRouter();
const showinfo = ref(1);
// 控制左侧菜单栏显示的变量
const showSelect = ref(1)

// svg的填充颜色
const svgColor1 = ref('#8C8C8C')
const svgColor2 = ref('#8C8C8C')
const svgColor3 = ref('#8C8C8C')
const svgColor4 = ref('#8C8C8C')
const svgBorder1 = ref('#E6E6E6')
const svgBorder2 = ref('#E6E6E6')
const svgBorder3 = ref('#E6E6E6')
const svgBorder4 = ref('#E6E6E6')

const showSelectList = ref([
  { name: '数据统计', num: 1, lightIcon: statisticsLight, grayIcon: statisticsGray },
  { name: '统计检索', num: 2, lightIcon: tableLight, grayIcon: tableGray },
  { name: '检测记录', num: 3, lightIcon: recordLight, grayIcon: recordGray },
  { name: '日志信息', num: 4, lightIcon: logLight, grayIcon: logGray },
  { name: '硬件状态', num: 5, lightIcon: hardwareLight, grayIcon: hardwareGray },
])
// 定义左侧菜单的标题
const deviceTitle = ref({ name: '设备详情', Eng: 'Device datails' })
const terminalIdentity = ref<any>();
const lastProdeventinfoselfValue = ref<any>({})
const lastProdeventinfoselfValue1 = ref<any>({})
const lastProdeventinfoselfValue2 = ref<any>({})
const templatevalue = ref("")  //模板信息
const templatevalue1 = ref("")  //模板信息
const templatevalue2 = ref("")  //模板信息
const currentvalue = ref("")  //生产批次
const currentdisable = ref(true)  //生产批次的禁用状态
// const loading = ref(true)   //检测记录的白表格
const seacherLog = ref("")   //日志信息的搜索框
const statisticDataSourceinfo = ref<any>({})
const QualifiedRate = ref<any>("")
const DefectiveRate = ref<any>("")
const AbnormalRate = ref<any>("")
const levelSelect = ref()
const hardwareEcharts = ref<any>({})
const selectTime = ref([
  { time: "10分钟", valueNum: 10 },
  { time: "30分钟", valueNum: 30 },
  { time: "60分钟", valueNum: 60 },
  { time: "8小时", valueNum: 480 },
  { time: "12小时", valueNum: 720 },
  { time: "24小时", valueNum: 1440 }
])   //选择时间阈值
const dataList = ref([
  { name: '今日', num: 1, highlighted: false, activated: false },
  { name: '近3日', num: 3, highlighted: false, activated: false },
  { name: '近7日', num: 7, highlighted: false, activated: false },
  { name: '近30日', num: 30, highlighted: false, activated: false }
])
const SelectList = ref([
  { name: '信息', num: 1 },
  { name: '警告', num: 2 },
  { name: '错误', num: 3 }
])
const timeSelect = ref(10)
const timeSelect1 = ref(1)
const pageNo2 = ref(1)
const pageSize2 = ref(15)
const pageNo3 = ref(1)
const pageSize3 = ref(15)
const pageNo4 = ref(1)
const pageSize4 = ref(15)
const dataSets = ref("")
const SearchDataSource = ref([])
const SearchTotalRecords = ref('')
const recordsDataSource = ref([])
const TotalRecords = ref('')
const DataSource = ref([])
const loginfoTotalRecords = ref('')
const CheckNameList = ref<any>([])
const CheckResult = ref('NG')   //子组件检测记录传递过来的参数
const CheckItems = ref('')   //子组件检测记录传递过来的参数

//收集日历数据
const startDate = ref(dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'));
const endDate = ref<any>(dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
const dateRange = ref<any>([startDate.value, endDate.value]);

const defaultvalue = ref<any>([dayjs().subtract(1, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])


/** 
* @author:YangSongZhu 
* @description 方法描述
* @param {string} 参数与参数类型 
* @date: 2023-11-30 17:13:16 
**/
const handler1 = (item: any) => {
  templateinfo.value.forEach((i: any) => {
    i.active = false
  });
  item.active = true


}

// 统计检索
// 每也几条
const handlerpageChange2 = (msg: any) => {
  pageNo2.value = msg
  getStatisticSearch()
}

// 当前是第几页
const handlersizeChange2 = (msg: any) => {
  pageSize2.value = msg
  getStatisticSearch()
}

// 检索记录
const handlerpageChange3 = (msg: any) => {
  pageNo3.value = msg
  getRecords()
}

const handlersizeChange3 = (msg: any) => {
  pageSize3.value = msg
  getRecords()
}

// 日志信息
const handlersizeChange4 = (msg: any) => {
  pageSize4.value = msg
  getLogMessage()
}

const handlerpageChange4 = (msg: any) => {
  pageNo4.value = msg
  getLogMessage()
}

// 左侧菜单栏显示的点击事件
const handler = (shownum: any) => {
  showSelect.value = shownum
}
// ****************************************************************************
// 检测记录   接受子组件传递过来的参数
const handleDataFromChild = (data: any) => {
  CheckResult.value = data.num
};
const handleDataFromChild1 = (data: any) => {
  if (data == '全部缺陷') {
    CheckItems.value = ''
  } else {
    CheckItems.value = data
  }

};
const ChildChangePageSizeValue = (msg: any) => {
  handlerpageChange3(msg)
}

// ****************************************************************************

const clearLeaval = () => {
  levelSelect.value = null
}
const clearBatch = () => {
  currentvalue.value = ''
}

const disabledDateFun = (time: Record<string, any>) => {
  if (time.getTime() > new Date().getTime()) {
    return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
  }
};

const handleDateChange = () => {
  startDate.value = dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
  endDate.value = dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
};

const isEndCurrentTime = () => {
  const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  return dayjs(endDate.value).isSame(now, 'day');
};

// 监听dateRange的变化，并保持日期范围为三天或七天
watch(dateRange, () => {
  const diff = dayjs(dateRange.value[1]).diff(dateRange.value[0], 'day');
  if (diff > 2) {
    // 如果日期范围超过三天，则调整endDate为startDate加两天
    const newEndDate = dayjs(dateRange.value[1]).subtract(0, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
    endDate.value = newEndDate;
    // dateRange.value = [startDate.value, endDate.value];
  }
});

const changeDate = (days: any) => {
  const newStartDate = dayjs().subtract(--days, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
  dateRange.value = [startDate.value, endDate.value];
};

// 点击左双箭头
const decreaseDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
}

// 点击右双箭头
const increaseDate = () => {
  if (isEndCurrentTime()) return;
  const newStartDate = dayjs(startDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
};

// 点击左单箭头
const leftDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  dateRange.value[0] = newStartDate;
}

// 点击右单箭头
const rightDate = () => {
  if (isEndCurrentTime()) return;
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  endDate.value = newEndDate;
  dateRange.value[1] = newEndDate;
}
// 箭头----mouseover
const handleMouseOver = (num: any) => {
  if (num == 1) {
    svgColor1.value = '#F2994A'
  } else if (num == 2) {
    svgColor2.value = '#F2994A'
  } else if (num == 3) {
    svgColor3.value = '#F2994A'
  } else {
    svgColor4.value = '#F2994A'
  }
}
// 箭头----mouseout
const handleMouseOut = (num: any) => {
  if (num == 1) {
    svgColor1.value = '#8C8C8C'
  } else if (num == 2) {
    svgColor2.value = '#8C8C8C'
  } else if (num == 3) {
    svgColor3.value = '#8C8C8C'
  } else {
    svgColor4.value = '#8C8C8C'
  }
}

// 箭头----mousedown
const handleMouseDown = (num: any) => {
  if (num == 1) {
    svgColor1.value = '#F2994A'
    svgBorder1.value = '#F2994A'
  } else if (num == 2) {
    svgColor2.value = '#F2994A'
    svgBorder2.value = '#F2994A'
  } else if (num == 3) {
    svgColor3.value = '#F2994A'
    svgBorder3.value = '#F2994A'
  } else {
    svgColor4.value = '#F2994A'
    svgBorder4.value = '#F2994A'
  }
}
// 箭头----mouseup
const handleMouseUp = (num: any) => {
  if (num == 1) {
    svgColor1.value = '#8C8C8C'
    svgBorder1.value = '#E6E6E6'
  } else if (num == 2) {
    svgColor2.value = '#8C8C8C'
    svgBorder2.value = '#E6E6E6'
  } else if (num == 3) {
    svgColor3.value = '#8C8C8C'
    svgBorder3.value = '#E6E6E6'
  } else {
    svgColor4.value = '#8C8C8C'
    svgBorder4.value = '#E6E6E6'
  }
}
const class1 = ref(1)
// 
const handleTextMouseOver = (index: any) => {
  dataList.value.forEach((item, i) => {
    dataList.value[index].highlighted = true;
  });
}
// 
const handleTextMouseOut = (index: any) => {
  dataList.value[index].highlighted = false;
}
// 
const handleTextMouseDown = (index: any) => {
  dataList.value[index].activated = true;
}
// 
const handleTextMouseUp = (index: any) => {
  dataList.value[index].activated = false;
  dataList.value[index].highlighted = false;
}
// 批次搜索
const searchText = ref()
onMounted(async () => {
  // 在路由更新前获取query数据
  await beforeUpdate()
  //单个设备的模板信息
  await getTemplateinfo();
  // 最后一条生产事件信息
  await getLastProdevent();
  // 指定设备信息
  await getSelfdevice();
  // 生产批次
  await getcurrent1()
});

// 在路由更新前获取数据
const beforeUpdate = async () => {
  if (route.name === 'Details' && router.currentRoute.value.params.id) {
    terminalIdentity.value = router.currentRoute.value.params.id;
  }
};

// 点击左侧菜单栏的回调函数
const handlerView = async (number: any) => {
  // 将点击的参数赋值给控制展示的字段
  showinfo.value = number;
  if (number == 2) {
    getStatisticSearch()
  }
  if (number == 3) {
    // 先从仓库那会数据进行赋值，保证最后一条模板信息的id是存在的
    await getLastInfo()
    // console.log(lastProdeventinfoselfValue.value.TemplateId);
    //检索指定设备的检测记录  
    await getRecords()
    // loading.value = false
    currentdisable.value = false
  }
  if (number == 4) {
    getLogMessage()
  }
  if (number == 5) {
    gethardware()
  }
};

// 派发单个设备的模板信息的功能函数
const getTemplateinfo = async () => {
  if (!terminalIdentity.value) return
  await devicesStore.template(terminalIdentity.value);
}

// 获取根据设备序列号查询最后一条生产事件信息
const getLastProdevent = async () => {
  if (!terminalIdentity.value) return
  await devicesStore.lastProdevent(terminalIdentity.value);
  // 请求发送成功后再从仓库拿数据并且进行赋值
  getLastInfo()
  // 赋值成功也就是说拿到TemplateId后在发送请求获取具体数据

  // 因为要带着TemplateId获取具体的渲染数据
  getStatistic()
}

// 获取指定设备信息 （第一行：标题、产线。。。）
const getSelfdevice = async () => {
  if (!terminalIdentity.value) return
  await detailsStore.selfdevice(terminalIdentity.value);
}

// //设备详情中数据统计的卡片数据
const getStatistic = async () => {
  if (!terminalIdentity.value || !lastProdeventinfoselfValue.value.TemplateId) return
  await detailsStore.statistic(terminalIdentity.value, lastProdeventinfoselfValue.value.TemplateId);
  getstatisticnum()
}
const getStatistic1 = async () => {
  if (!terminalIdentity.value || !lastProdeventinfoselfValue1.value.TemplateId) return
  await detailsStore.statistic(terminalIdentity.value, lastProdeventinfoselfValue1.value.TemplateId);
  getstatisticnum()
}
//检索指定设备日志信息
const getLogMessage = async () => {
  if (!terminalIdentity.value) return
  const data = {
    terminalIdentity: terminalIdentity.value,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    LogLevel: levelSelect.value,
    PageNumber: pageNo4.value,
    PaginationSize: pageSize4.value,

  }
  await detailsStore.logMessage(data);
  const recordsDataSourceStore = ref(computed(() => detailsStore.$state.loginfo));
  DataSource.value = recordsDataSourceStore.value.DataSource
  loginfoTotalRecords.value = recordsDataSourceStore.value.TotalRecords
}

//检测记录
const getRecords = async () => {
  if (!terminalIdentity.value || !lastProdeventinfoselfValue2.value.TemplateId) return
  const data = {
    TerminalIdentity: terminalIdentity.value,
    TemplateId: lastProdeventinfoselfValue2.value.TemplateId,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    ProductionBatch: currentvalue.value,   //生产批次
    PageNumber: pageNo3.value,
    PaginationSize: pageSize3.value,
    CheckResult: CheckResult.value,
    CheckItems: CheckItems.value
  }
  await detailsStore.records(data);
  const recordsDataSourceStore = ref(computed(() => detailsStore.$state.recordsDataSource));
  const TotalRecordsStore = ref(computed(() => detailsStore.$state.TotalRecords));
  const CheckNameListStore = ref(computed(() => detailsStore.$state.CheckNameListSource));
  recordsDataSource.value = recordsDataSourceStore.value
  TotalRecords.value = TotalRecordsStore.value
  CheckNameList.value = CheckNameListStore.value
}

//检索指定设备的统计检索
const getStatisticSearch = async () => {
  if (!terminalIdentity.value || !lastProdeventinfoselfValue1.value.TemplateId) return
  const data = {
    TerminalIdentity: terminalIdentity.value,
    TemplateId: lastProdeventinfoselfValue1.value.TemplateId,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    TimeThreshold: timeSelect.value,//时间阈值 
    PageNumber: pageNo2.value,
    PaginationSize: pageSize2.value
  }
  await detailsStore.StatisticSearch(data);
  const searchDataSourceStore = ref(computed(() => detailsStore.$state.SearchDataSource));
  const SearchTotalRecordsStore = ref(computed(() => detailsStore.$state.SearchTotalRecords));
  SearchDataSource.value = searchDataSourceStore.value
  SearchTotalRecords.value = SearchTotalRecordsStore.value
}

//根据模板编号查询生产批次信息
const getcurrent = async () => {
  if (!lastProdeventinfoselfValue2.value.TemplateId) return
  await detailsStore.current(lastProdeventinfoselfValue2.value.TemplateId)
}

// 初次加载   根据模板编号查询生产批次信息
const getcurrent1 = async () => {
  if (!lastProdeventinfoselfValue.value.TemplateId) return
  await detailsStore.current(lastProdeventinfoselfValue.value.TemplateId)
}

//根据查询参数获取指定设备硬件状态的时间窗口数据
const gethardware = async () => {
  if (!terminalIdentity.value) return
  const data = {
    TerminalIdentity: terminalIdentity.value,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    TimeThreshold: timeSelect1.value
  }
  await detailsStore.hardware(data)
  await getHardwareEcharts()
}


// 从仓库中拿数据
//模板生产事件信息
const templateinfo: any = computed(() => devicesStore.$state.templateinfo.map((item: any) => {
  if (item.TemplateName == templatevalue.value) {
    item.active = true;
  } else {
    item.active = false;
  }
  return item;
})
);

//所有设备的卡片式综合数据（第一行：标题、产线。。。）
const details: any = computed(() => detailsStore.$state.details);

// 各种数字
const getstatisticnum = () => {
  const statisticDataSource: any = ref(computed(() => detailsStore.$state.statisticDataSource));
  if (!statisticDataSource.value) {
    setTimeout(() => {
      QualifiedRate.value = 0
      DefectiveRate.value = 0
      AbnormalRate.value = 0
    }, 1000)

  } else {
    statisticDataSourceinfo.value = statisticDataSource.value
    if (statisticDataSourceinfo.value.QualifiedRate == 0) {
      QualifiedRate.value = 0
    } else {
      QualifiedRate.value = statisticDataSourceinfo.value.QualifiedRate / 10
    }

    if (statisticDataSourceinfo.value.DefectiveRate == 0) {
      DefectiveRate.value = 0
    } else {
      DefectiveRate.value = statisticDataSourceinfo.value.DefectiveRate / 10
    }

    if (statisticDataSourceinfo.value.AbnormalRate == 0) {
      AbnormalRate.value = 0
    } else {
      AbnormalRate.value = statisticDataSourceinfo.value.AbnormalRate / 10
    }
  }

}

// 单个设备最后一条生产事件信息
const getLastInfo = () => {
  //单个设备最后一条生产事件信息
  const lastProdeventinfoself: any = ref(computed(() => devicesStore.$state.lastProdeventinfoself));
  if (!lastProdeventinfoself.value) return
  lastProdeventinfoselfValue.value = lastProdeventinfoself.value
  lastProdeventinfoselfValue1.value = lastProdeventinfoself.value
  lastProdeventinfoselfValue2.value = lastProdeventinfoself.value
}

const getHardwareEcharts = () => {
  const hardwareEchartsinfo: any = ref(computed(() => detailsStore.$state.hardwareInfo));
  hardwareEcharts.value = hardwareEchartsinfo.value
}
/**
      *封装函数 downLoadFile
      *params:
      *data:二进制文件
      *name:自定义文件名称
      */


const getexport = async () => {
  if (!terminalIdentity.value) return
  const dataParams = {
    TerminalIdentity: terminalIdentity.value,
    TemplateId: lastProdeventinfoselfValue.value.TemplateId,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    TimeThreshold: timeSelect.value
  }
  return request.post("records/export", dataParams, {
    responseType: 'blob', // 设置响应类型为blob，以获取二进制流
  }).then(response => {
    console.log(response);
    const headers = response.headers['content-disposition'];
    const filename = getFilenameFromContentDisposition(headers);
    const type = response.data.type;
    // 创建 Blob 对象
    const blob = new Blob([response.data], { type: type });
    // 创建链接并下载
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = filename;
    downloadLink.click();

    // 释放 URL 对象
    URL.revokeObjectURL(downloadLink.href);
    return response.data; // 返回二进制流数据
  }).catch(error => {
    ElMessage({
      type: "error",
      message: "下载出错",
    });
    throw error; // 抛出错误供调用方处理
  });
}
// 文件名转义
const getFilenameFromContentDisposition = (contentDisposition: any) => {
  const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  const matches = filenameRegex.exec(contentDisposition);
  console.log(matches);

  if (matches != null && matches[1]) {
    let encodedFilename = matches[1].replace(/['"]/g, '');
    let decodedFilename = decodeURIComponent(encodedFilename);
    let parsedFilename = decodedFilename.replace(/_/g, '');
    return '数据统计_' + parsedFilename;
  }
  return ''; // 如果无法从content-disposition中获取有效文件名，则返回空字符串
}

// 点击导出按钮
const exportHandler = async () => {

  await getexport()
}


// 监听inputValue的变化
watch(templatevalue, (templatenewValue, oldValue) => {
  lastProdeventinfoselfValue.value.TemplateId = templatenewValue
  //设备详情中数据统计的卡片数据
  getStatistic()
});
watch(templatevalue1, (templatenewValue, oldValue) => {
  lastProdeventinfoselfValue1.value.TemplateId = templatenewValue
  getStatisticSearch()
});
watch(templatevalue2, (templatenewValue, oldValue) => {
  lastProdeventinfoselfValue2.value.TemplateId = templatenewValue
  getcurrent()
  getRecords()
  currentvalue.value = ''
});
// 监听生产批次的变化
watch(currentvalue, async (currentnewValue, oldValue) => {
  currentvalue.value = currentnewValue
  // loading.value = true
  //检索指定设备的检测记录
  await getRecords()
  // loading.value = false
});

// 监听级别的变化
watch(levelSelect, levelSelectnewValue => {
  if (levelSelectnewValue == 0) return;
  getLogMessage()
});

watch(dateRange, (dateRangenewValue, oldValue) => {

  dateRange.value = dateRangenewValue;
  // if (showinfo.value == 5) {
  gethardware()
  // }
  if (showinfo.value == 4) {
    getLogMessage()
  }
  if (showinfo.value == 3) {
    getRecords()
  }
  if (showinfo.value == 2) {
    getStatisticSearch()
  }
});

//监听时间阈值的变化
watch(timeSelect, timeSelectnewValue => {
  timeSelect.value = timeSelectnewValue;
  getStatisticSearch()
});
watch(timeSelect1, timeSelectnewValue => {
  timeSelect1.value = timeSelectnewValue;
  gethardware()
});
watch(showSelect, () => {
  // gethardware()
});
// watch((router), () => {
//   location.reload()
// })
watch(CheckResult, () => {
  getRecords()
})
watch(CheckItems, () => {
  getRecords()
})
// watch监听查询参数的变化，并在回调函数中处理刷新逻辑。
watch(route,
  async (newQuery, oldQuery) => {
    // 获取设备卡片的综合数据
    // await getdevice()
    // await getprodevent()
    // 处理刷新逻辑
  }
);
</script>

<style scoped lang="less">
body {
  margin: 0;
  padding: 0;
}

.loadingTitle {
  font-size: 50px;
  text-align: center;
  color: gray;
}



:deep(.el-col-3) {
  flex: 0;
}

:deep(.el-card__body) {
  padding: 0px;
}

:deep(.el-select) {
  --el-select-input-focus-border-color: #f3ae70;
}

.el-select {
  --el-select-border-color-hover: rgba(242, 153, 74, 0.50);
}

/*日期选择框的hover效果和focus效果*/
:deep(.el-date-editor) {
  --el-input-hover-border-color: rgba(242, 153, 74, 0.50);
  --el-input-focus-border-color: #f3ae70;
}

:deep(.el-table__header-wrapper) {
  background: gray;
}

.details {
  padding-top: 24px;
  margin: 0 16px;

  .details-container {
    padding-left: 0px;

    .navigation-bar {
      .device-datails {
        width: 240px;
        height: 64px;
        border-radius: 4px;
        display: flex;
        color: #ffffff;
        background: #f2994a;
        padding-left: 24px;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;

        .pic {
          margin-right: 8px;
        }

        .wenzi {
          .china {
            font-size: 14px;
            line-height: 20px;
          }

          .Eng {
            font-size: 12px;
            color: #f9ead3;
          }
        }
      }

      .menu {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 24px;
        margin: 1px 0;
        color: #595959;
        border-radius: 4px;
        cursor: pointer;

        img {
          margin-right: 8px;
        }
      }

      .Activemenu {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 24px;
        margin: 1px 0;
        color: #f09a4e;
        border-radius: 4px;
        cursor: pointer;
        background: #FBFBFA;

        img {
          margin-right: 8px;
        }
      }


      .menu:hover {
        background: #FBFBFA;
        ;
      }
    }

    .information-bar {
      .information-content {
        padding-left: 32px;

        .information {


          .card-info {

            .info-top {
              display: flex;
              align-items: center;
              height: 96px;
              background: linear-gradient(to right, #62677a, #e7d3c1);
              border-radius: 4px 4px 0 0px;

              .info-top-img {
                img {
                  width: 80px;
                  height: 72px;
                }

                margin-left: 24px;
                margin-right: 40px;
              }

              .info-top-title {
                letter-spacing: 1px;

                .title {
                  font-size: 22px;
                  color: #fff;
                  height: 30px;
                  line-height: 30px;
                }

                .little-title {
                  font-size: 16px;
                  color: #fff;
                  height: 24px;
                  line-height: 24px;
                }
              }
            }

            .info-bottom {
              background: #fff;
              padding: 0 25px;
              border-radius: 0px 0px 4px 4px;
              box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);

              div {
                padding: 4px 0;
              }

              :deep(.el-input__wrapper) {
                border-radius: 30px;
              }



              .select {
                width: 100%;
                border-radius: 50%;
                padding: 12px 0;

              }

              .showinfo {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                  display: flex;
                  align-items: center;
                }

                .picker {
                  display: flex;
                  align-items: center;
                  margin-left: 10px;

                  .datePicker {
                    width: 20px;
                  }

                  .jiantou {
                    width: 3px;
                    margin-left: 7px;
                    border: none;
                  }

                  .time {
                    font-size: 12px;
                    margin: 0 4px;
                    border: 1px solid #eaedf0;
                    color: rgba(89, 89, 89, 1);
                    border-radius: 8px;
                    line-height: 18px;
                    padding: 7px 8px;
                    cursor: pointer;
                  }

                  .highlighted {
                    color: #F2994A;
                  }

                  .activated {
                    border: 1px solid #F2994A;
                    color: #F2994A;
                  }
                }





                .selectminute {
                  width: 20%;
                }

                .yellowbtn {
                  display: flex;

                  .btn {
                    border-radius: 16px;
                    background: #F2994A;
                    color: #fff;
                    margin-left: 20px;
                    display: flex;
                    justify-content: space-between;

                    span {
                      margin-left: 8px;
                    }
                  }
                }

              }

              .pd3 {
                padding: 7px 0 !important;
              }

              .pd5 {
                padding: 8px 0;
              }
            }
          }
        }

        .echartstu-chart {
          margin-top: 24px;

          .data-statistics {
            .numCard {
              display: flex;
              justify-content: space-between;
              margin-bottom: 24px;

              .mr24 {
                width: 25%;
                margin-right: 24px;
                border-radius: 4px;
                box-shadow: 0px 3px 6px 0px rgba(9, 85, 237, 0.08);
              }

              .mr24:hover {
                box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);

              }

              .mr {
                width: 25%;
              }

              .echart-flex {
                display: flex;
                margin: 4px 24px;
                justify-content: space-between;
                align-items: center;
                position: relative;

                .Products {
                  margin-top: 15px;

                }

                .ProductRate {
                  font-size: 14px;
                  position: absolute;
                  left: 74%;
                  top: 60%;
                }


                .numName {
                  letter-spacing: 1px;
                  color: var(--65, #595959);
                  font-family: Source Han Sans CN;
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                }

                .num {
                  color: var(--80, #333);
                  font-family: Source Han Sans CN;
                  font-size: 30px;
                  font-style: normal;
                  font-weight: 500;
                  height: 45px;
                }

                .blue {
                  color: #1AA637;
                }

                .red {
                  color: #FF636B;
                }

                .yellow {
                  color: #FFBC00;
                }


                /* 比上一次*/
                /*
                .rate {
                  font-family: Source Han Sans CN;
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 18px;

                  .ratenum {
                    margin-left: 20px;
                  }
                }
                */
              }
            }

            .bar {
              display: flex;
              justify-content: space-between;

              .barGraph {
                width: 50%;
                border-radius: 4px;
                margin-right: 24px;
                height: 440px;
                /* 需要固定*/
                box-shadow: 0px 3px 6px 0px rgba(9, 85, 237, 0.08);
              }

              .barGraph:hover {
                box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);
              }

              .barChart {
                width: 50%;
                border-radius: 4px;
                height: 440px;
                /* 需要固定*/
                box-shadow: 0px 3px 6px 0px rgba(9, 85, 237, 0.08);
              }

              .barChart:hover {
                box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);
              }
            }


          }

          .boxShdow {
            box-shadow: 0px 3px 6px 0px rgba(9, 85, 237, 0.08);
          }

          .graph {
            .graph-container {
              box-shadow: 0px 3px 6px 0px rgba(9, 85, 237, 0.08);

              .container {
                padding: 20px 24px;
                /*左边使用率*/

                /*选中*/
                .left-container {
                  cursor: pointer;
                  width: 239px;
                  height: 80px;
                  border-radius: 4px;
                  padding-left: 24px;
                  background: #878D9A;
                  display: flex;
                  align-items: center;
                  margin-bottom: 8px;

                  .imgPadding {
                    margin-right: 16px;
                  }

                  /*综合选中字样*/
                  .zonghe {
                    font-size: 18px;
                    color: #fff;
                  }

                  /*CPU选中字样*/
                  .usageRate {
                    color: #fff;

                    .word12 {
                      font-size: 12px;
                      line-height: 18px;
                    }

                    .word18 {
                      font-size: 18px;
                      font-weight: 500;
                      line-height: 26px;
                    }
                  }

                  .imgWidth {
                    width: 52px;
                    height: 52px;
                    margin-right: 16px;
                  }
                }

                /*未选中*/
                .left-container-noSelect {
                  cursor: pointer;
                  width: 239px;
                  height: 80px;
                  border-radius: 4px;
                  padding-left: 24px;
                  background: #FBFBFA;
                  display: flex;
                  align-items: center;
                  margin-bottom: 8px;

                  .imgPadding {
                    margin-right: 16px;
                  }

                  /*综合未选中字样*/
                  .zonghe {
                    font-size: 18px;
                    color: #000;
                  }

                  /*CPU未选中字样*/
                  .usageRate {
                    color: #000;

                    .word12 {
                      font-size: 12px;
                      line-height: 18px;
                    }

                    .word18 {
                      font-size: 18px;
                      font-weight: 500;
                      line-height: 26px;
                    }
                  }

                  .imgWidth {
                    width: 52px;
                    height: 52px;
                    margin-right: 16px;
                  }
                }

                /*右面展示区*/
                .right-container {
                  background: #fbfbfa;
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .graph-container:hover {
              box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);
            }
          }
        }
      }
    }
  }
}

:deep(.el-table--fit) {
  border-radius: 6px;
}

:deep(.el-select-dropdown) {
  color: #F2994A;
  width: 300px;
}

.activeColor {
  color: #f09a4e
}
:deep(.selected ){
  --el-color-primary: #F2994A;
}
</style>